<template>
    <div class="container">
        <div class="header">
            <ul>
                <router-link tag="li" :to="item.path" v-for = "(item, index) of list" :key = "index">
                    <p>{{item.name}}</p>
                </router-link>
            </ul>
        </div>
        <ul>
            <li class="keepitem">
                <div class="keeptop">
                <div class="name">
                    <p>vivi妈妈</p>
                    <time>3秒前</time>
                    <span>宝宝2岁</span>
                </div>
                </div>
                <div class="keepcon">
                <p>清晨起来打开窗，阳光美美哒，看着蝴蝶闻花香，风景美美哒，你在远处看着我，笑容美美哒，我的心就像朵花儿，开的美美哒，我爱你你爱我，感情美美哒，爸爸妈妈身体好，亲情美美哒...</p>
                <b>阅读全文</b>
                <img src="@/../static/06.jpg" alt="">
                </div>
                <div class="comments">
                <ul>
                    <li>分享</li>
                    <li>评论</li>
                    <li><i class="iconfont icon-xin"></i>9999</li>
                </ul>
                </div>
            </li>

             <li class="keepitem">
                <div class="keeptop">
                <div class="name">
                    <p>vivi妈妈</p>
                    <time>3秒前</time>
                    <span>宝宝2岁</span>
                </div>
                </div>
                <div class="keepcon">
                <p>清晨起来打开窗，阳光美美哒，看着蝴蝶闻花香，风景美美哒，你在远处看着我，笑容美美哒，我的心就像朵花儿，开的美美哒，我爱你你爱我，感情美美哒，爸爸妈妈身体好，亲情美美哒...</p>
                <b>阅读全文</b>
                <img src="@/../static/06.jpg" alt="">
                </div>
                <div class="comments">
                <ul>
                    <li>分享</li>
                    <li>评论</li>
                    <li><i class="iconfont icon-xin"></i>9999</li>
                </ul>
                </div>
            </li>
      </ul>
    </div>
</template>

<script>
export default {
    name:'Lift',
    data(){
        return{
            list: [{
                name:'关注',
                path: '/life'
            }, {
                name:'社区',
                path: '/community'
            }, {
                name:'优品',
                path: '/up'
            }]
        }
    },
    mounted() {
        this.$emit('toparent',this.tit)
    },
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
    .keepitem {
      @include rect(100%, 410px);
      background:#EAEAEA;
      margin-bottom:10px;
      .keeptop {
        @include rect(100%, 70px);
        @include flexbox();
        // @include justify-content();
        @include align-items();
        img {
          @include rect(44px, 44px);
          border-radius: 50%;
          float: left;
          margin:0 5px 0rem 2px;        
        }
        .name {
          p {
            @include font-size(14px);
            @include text-color(#6f6e6e);
          }
          time {
            @include font-size(10px);
            @include text-color(#A6A4A4);
          }
          span {
            @include font-size(10px);
            @include text-color(#A6A4A4);
          }
        }
      }
      .keepcon {
        @include rect(96%, 280px);
        margin:0 2%;
        p {
          font-size: 14px;
          color:#5E5E5E;
          line-height:20px;
        }
        b {
          @include rect(100%,40px);
          line-height: 40px;
        }
        img {
          @include rect(100%, 152px);
        }
      }
      .comments {
        @include rect(100%, 60px);
        ul {
          @include rect(100%, 60px);
          @include flexbox();
          @include justify-content(space-around);
          @include align-items();
          li {
            color:#5e5e5e;
            font-size: 12px;
          }
        } 
      }
    }
    .container{
        height: 100%;
    }
    .header ul{
        display: flex;
        padding: 2% 20%;
        justify-content: space-between;
        background: #26A2FF
               
    }
    .header ul li{
        flex: 1;
        width: 15%;
        text-align: center
    }
    .header li p{
        color: white
    }
    .header ul li:first-child{
        background: rgb(70, 172, 250)
    }

</style>
